<template>
  <div>
    <!-- 下拉选择查询条件 -->
    <span class="info" v-for="(item, index) in infoArray" :key="index">
      <div v-if="!item.show">
        {{ item.label }}:
        <el-select
          v-model="queryParam[item.value]"
          class="m-2"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in infolist[item.value]"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </div>
    </span>
    <!-- 文本输入条件 -->
    <span class="info" v-for="item in infoInput" :key="item.value">
      <el-input
        v-model="queryParam[item.value]"
        :placeholder="item.placeholder"
      >
        <i slot="prefix" class="el-input__icon el-icon-search" />
      </el-input>
    </span>
    <el-button type="primary" @click="queryList()">查询</el-button>
    <el-button type="primary" @click="showDialog()">新增</el-button>
    <el-table stripe :data="tableData" border style="width: 100%">
      <template v-for="(item, index) in columnList">
        <el-table-column
          :key="index"
          :prop="item.field"
          :label="item.title"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span> {{ scope.row[item.field] | qxSelffilter(item.value) }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" @click="updateShowDialog(row)">
            修改
          </el-button>
          <el-button type="danger" @click="deleteById(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px; text-align: center"
      :current-page="queryParam.currentPage"
      :page-size="queryParam.pageSize"
      :page-sizes="[3, 5, 10, 20]"
      :total="total"
      :pager-count="5"
      @size-change="handleSizeChange"
      @current-change="goPage"
      layout=" prev, pager, next , total,sizes"
    />
    <EditProduct
      ref="editRef"
      :showEdit="dialogFormVisible"
      :infolist="infolist"
      :dialogForm="dialogForm"
      @closeDialog="CloseShow"
    />
  </div>
</template>
<script>
import EditProduct from "./model/EditProduct.vue";
import { EnumUtility } from "@/utils/EnumUtility";
import { locale } from 'moment';
export default {
  name: "UpChannelProduct",
  components: { EditProduct },
  data() {
    return {
      // (高级查询下拉条件)下拉选择属性,如果不作为下拉的查询条件 show: "false"
      infoArray: [
        /*
         * label:下拉选项的标题,如:用户状态
         * value: 选择值列表 与 传到 服务端的字段: 如:status=30
         * enumType:从字典=>枚举 中的下拉选项映射值 , 枚举值赋值是在创建vue对象后,即方法中实现的
         */
        { label: "产品状态", value: "status", enumType: "status" },
        {
          label: "产品类型",
          value: "type",
          enumType: "product_type",
          show: "false",
        },
      ],
      // (高级查询下拉条件)下拉选项值,或新增修改下拉选项值
      /* 枚举中完成赋值的status,type*/
      infolist: {
        // status: [
        //   { enumType: 'status', value: '0', text: '启用' },
        //   { enumType: 'status', value: '1', text: '禁用' }
        // ]
        // 页面加载的时候查询,并主封装为这个格式 {value: '值id', text: 'XXX' },在新增或修改的下拉选项中使用
        channelUpList: [],
        sysProductList: [],
      },
      // (高级查询下拉条件)输入查询条件
      infoInput: [
        /* infoInput：输入框数据 */
        // { placeholder: '输入:字典类型', value: 'enumType' },
        { placeholder: "输入:产品名称", value: "productName" },
        { placeholder: "输入:产品ID", value: "id" },
        { placeholder: "输入:产品编号", value: "productNo" },
      ],
      // 列表查询参数
      queryParam: {
        currentPage: 1,
        pageSize: 10,
      },
      // 列表数据
      tableData: [],
      // 列表总条数
      total: 0,
      // 列字段
      columnList: [
        { title: "ID", field: "id", width: "60px" },
        { title: "产品编号", field: "productNo" },
        { title: "渠道名称", field: "channelName" },
        { title: "产品名称", field: "productName" },
        { title: "产品价格", field: "productPrice" },
        {
          title: "产品类型",
          field: "type",
          width: "100px",
          value: { enum: "product_type" },
        },
        {
          title: "状态",
          field: "status",
          width: "60px",
          value: { enum: "status" },
        },
        { title: "备注", field: "remark" },
        {
          title: "更新时间",
          field: "updateTime",
          value: { date: "MM-dd hh:mm:ss" },
        },
        {
          title: "创建时间",
          field: "createTime",
          value: { date: "MM-dd hh:mm:ss" },
        },
      ],
      dialogFormVisible: false, // 是否显示弹框
      dialogForm: {
        dialogName: "修改", // 弹框标题 如:新增用户 或 修改 用户
      }, // 编辑或修改的字段,如name, idd等
    };
  },
  watch: {},
  mounted() {
    // this.queryList()
  },
  created() {
    this.queryChannelUpList()
    this.querySysProductList()
    // 给枚举赋值   { label: "字典状态", value: "status", enumType: "status" },
    const enumUtility = new EnumUtility();
    this.infoArray.forEach((element) => {
      if (element.enumType) {
        // 枚举数据结构 [{"enumType":"status","value":"0","text":"启用"},{"enumType":"status","value":"1","text":"禁用"}]
        this.infolist[element.value] = enumUtility.Get(element.enumType);
      }
    });
  },
  methods: {
    async queryList() {
      const result = await this.$api.upProduct.queryList(this.queryParam);
      if (result.code == "100") {
        this.tableData = result.data.list;
        this.total = result.data.total;
      }
    },
    async queryChannelUpList() {
      let queryParam={
        currentPage: 1,
        pageSize: 2000,
      }
      const result = await this.$api.upChannel.queryList(queryParam);
      if (result.code == "100") {
        this.infolist.channelUpList = result.data.list.map((item) => {
          return {
            text: item.id + "-" + item.channelName,
            value: item.id,
          };
        });
      }
    },
    async querySysProductList() {
      let queryParam={
        currentPage: 1,
        pageSize: 2000,
      }
      const result = await this.$api.sysProduct.queryList(queryParam);
      if (result.code == "100") {
        this.infolist.sysProductList = result.data.list.map((item) => {
          return {
            text: item.id + "-" + item.productName,
            value: item.id+"",
          };
        });
      }
    },
    goPage(currentPage) {
      this.queryParam.currentPage = currentPage;
      this.queryList();
    },
    handleSizeChange(pageSize) {
      this.queryParam.pageSize = pageSize;
      this.queryParam.currentPage = 1;
      this.queryList();
    },
    showDialog() {
      // console.log('显示弹框')
      this.dialogForm = {
        channelId: "",
        sysProductId: "",
        productName: "",
        productNo: "",
        productPrice: "",
        type: "",
        status: "",
        remark: "",
        dialogName: "新增",
      };
      // 显示弹框
      this.$refs.editRef.showEdit = true;
    },
    updateShowDialog(row) {
      this.dialogForm = { ...row };
      this.dialogForm["dialogName"] = "修改";
      // 显示对话框
      this.$refs.editRef.showEdit = true;
    },
    deleteById(row) {
      // 弹框
      this.$confirm(`你确定删除:${row.productName}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 当用户点击确定按钮的时候会出发
          // 向服务器发请求
          const result = await this.$api.upProduct.deleteById(row.id);
          // 如果删除成功
          if (result.code == "100") {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 再次获取品牌列表数据
            this.queryList();
          }
        })
        .catch(() => {
          // 当用户点击取消按钮的时候会触发
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    CloseShow(data) {
      // console.log('CloseShow....',data);
      // 关闭对话
      // this[data.name] = false;
      if (data.isRefresh == "update") {
        this.queryList(); // 更新的情况
      }
      if (data.isRefresh == "insert") {
        this.queryList(); // 新增的情况
      }
    },
  },
};
</script>

<style lang="scss">
</style>

